<template>
  <div class="list-group">
    <a-icon type="menu" class="handle"/>
    <a-select
        label-in-value
        :default-value="{ key: '请选择' }"
        style="width: 150px"
      >
      <a-select-option :value="item.title" v-for="item in columns" :key="item.title">
        {{ item.title }}
      </a-select-option>
    </a-select>
    <span class="ml30 sort-btn">
      <span :class="{checked: active}" @click="changeActive">正序排列</span>
      <span :class="{checked: !active}" @click="changeActive">倒序排列</span>
    </span>
    <span class="iconfont icon-a-shanchu del-icon" @click="del" v-if="len > 1"></span>
  </div>
</template>

<script>

export default {
  name: 'ListItem',
  data () {
    return {
      active: true
    }
  },
  props: {
    no: {
      type: Number
    },
    len: {
      type: Number
    },
    columns: {
      type: Array,
      default() {
        return []
      }
    }
  },
  computed: {
  },
  mounted() {
  },
  components: {

  },
  methods: {
    changeActive(val) {
      this.active = !this.active;
    },
    del() {
      this.$emit('removeAt', this.no)
    }
  }
}
</script>

<style lang="less" scoped>
  .list-group {
    margin-bottom: 20px;
    position: relative;
    display: block;
    padding: 0.75rem 1.25rem;
    margin-bottom: -1px;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,.125);

    .handle {
      margin-right: 20px;
      cursor: move;
    }

    .close {
      float: right;
      padding-top: 8px;
      padding-bottom: 8px;
    }
    
    .sort-btn {
      .checked {
        color: #3d6cf7;
      }

      span {
        padding: 5px 10px;
        border: 1px solid #eee;
        display: inline-block;
        border-radius: 3px;
        cursor: pointer;
      }
    }

    .del-icon {
      cursor: pointer;
      margin-left: 10px;
    }

    .add-icon {
      color: rgba(0, 0, 0, 0.65);
      cursor: pointer;
      font-size: 16px;
      margin-left: 10px;
    }
  }
</style>
